<template>
    <div>

      <div style="margin-bottom: 10px">
        <el-row :gutter="10">
          <el-col :span="4">
            <el-card>
              <div style="display: flex; align-items: center">
                <div style="width: 150px">
                  <div style="font-size: 20px">机关公务员人数</div>
                </div>
                <div style="flex: 1; text-align: right;">
                  <div style="font-size: 20px; color: blue; font-weight: bold">{{ totalUserCount || 0 }}</div>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>

      <div style="display: flex; grid-gap: 10px; margin-bottom: 10px">
        <div style="width: 50%" class="card">
          <div ref="degreeStats" style="width: 100%; height: 300%" />
        </div>
        <div style="width: 50%" class="card">
          <div ref="officeStats" style="width: 100%; height: 300%" />
        </div>
      </div>

    </div>
  </template>

  <script>
  import * as echarts from 'echarts';
  import { sumUser, degree, office } from "@/api/jiguanorder"

  export default {
    name: 'Get',
    data() {
      return {
        totalUserCount: '',
        totalDegreeCount: [],
        totalofficeCount: [],
        degreeCount: [],
        degreeStats: null,
        officeStats: null,
        degreeName: '',
      };
    },
    created() {
      this.sumCivilServants();
      this.degreeCivilServants();
      this.officeCivilServants();
    },
    methods: {
      sumCivilServants() {
        sumUser().then(response => {
          this.totalUserCount = response.data;
        });
      },
      degreeCivilServants() {
        degree().then(response => {
          this.totalDegreeCount = response.data;
          if(this.totalDegreeCount.graduate_quantity) {
            this.degreeName='本科';
            this.degreeCount.push({ value: this.totalDegreeCount.graduate_quantity, name: this.degreeName })
          }
          if(this.totalDegreeCount.other_quantity) {
            this.degreeName='其他'
            this.degreeCount.push({ value: this.totalDegreeCount.other_quantity, name: this.degreeName })
          }
          if(this.totalDegreeCount.undergraduate_quantity) {
            this.degreeName='研究生'
            this.degreeCount.push({ value: this.totalDegreeCount.undergraduate_quantity, name: this.degreeName })
          }

          this.degreeStats = echarts.init(this.$refs.degreeStats, "degree");
          this.degreeStats.setOption({
            title: {
              text: '机关公务员学历分布统计',
              left: 'center'
            },
            tooltip: {
              trigger: 'item',
              formatter: '{a} <br/>{b} : {c} ({d}%)'
            },
            legend: {
              orient: 'vertical',
              left: 'left'
            },
            series: [
              {
                name: '学历',
                type: 'pie',
                radius: '50%',
                data: this.degreeCount,
                emphasis: {
                  itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                  }
                }
              }
            ]
          })
        })
      },
      officeCivilServants() {
        office().then(response => {
          this.totalofficeCount = response.data;
          const totalCount = this.totalofficeCount.officeCount + this.totalofficeCount.directorCount + this.totalofficeCount.other;

          this.officeStats = echarts.init(this.$refs.officeStats, "office");
          this.officeStats.setOption({
            title: {
              text: '任正（副）级人数统计'
            },
            tooltip: {
              trigger: 'item',
              formatter: function(params) {
                let percent = (params.value / totalCount * 100).toFixed(2) + '%';
                return '人数' + '<br/>' + params.seriesName + ': ' + params.value + ' (' + percent + ')';
              }
            },
            legend: {},
            grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
            },
            xAxis: {
              type: 'value'
            },
            yAxis: {
              data: ['']
            },
            series: [
              {
                name: '处级',
                type: 'bar',
                data: [this.totalofficeCount.officeCount]
              },
              {
                name: '科级',
                type: 'bar',
                data: [this.totalofficeCount.directorCount]
              },
              {
                name: '其他',
                type: 'bar',
                data: [this.totalofficeCount.other]
              }
            ]
          });
        });
      }
    }
  }
  </script>

  <style>
  .card {
    padding: 20px;
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.1);
  }
  </style>
